#include("../_common/_header.html")
#include("../_common/_footer.html")
#include("../_common/_navTop.html")
#include("../_common/search.html")
#include("../_common/catelog.html")
#@_header(viewPath, '', '')
#@_navTop()
<div class="layui-container content-front">
  	<div class="layui-row">
	    <div id="mainContent" class="layui-col-md8 layui-col-xs12" style="margin-top: 30px;">
				<fieldset class="layui-elem-field layui-field-title">
				  <legend>文章列表</legend>
				</fieldset>
	    </div>
	    <div class="layui-col-md3 layui-col-md-offset1 layui-hide-xs">
        <div style="margin-top: 30px;">#@search()</div>
        <div style="margin-top: 30px;">#@catelog()</div>
	    </div>
	</div>
</div>
<script type="text/javascript">

layui.use('flow', function(){
  var flow = layui.flow;
  flow.load({
    elem: '#mainContent' // 追加内容的容器
    ,mb: 200
    ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
    	var lis = [];
    	$.get('#(apiPath)/' + page, function(ret){
        //假设你的列表返回在data集合中
        layui.each(ret.data, function(index, item){
          lis.push(createItem(item));
        });
        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
        //totalPage为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
        next(lis.join(''), page < ret.totalPage);
      });
    }
  });
  function createItem(item) {
    var html = '<div class="layui-col-md12 list-block">';
      html += '<div class="layui-col-md3 layui-hide-xs box-img">';
      html += '<div class="cover-img" style="background-image:url(' + item.thumbnail + ');"></div>';
      html += '</div>';
      html += '<div class="layui-col-md9 layui-col-xs12 box-container">';
      html += '<div class="layui-elip title" title="' + item.title + '">';
      html += '<a id="title" href="/article/detail/' + item.id + '">' + item.title + '</a>';
      html += '</div>';
      html += '<div class="summary">' + item.summary + '</div>';
      html += '<div class="datetime"><i class="layui-icon icon">&#xe637;</i>' + item.update_time + '</div>';
      html += '<a class="read" href="/article/detail/' + item.id + '" target="_blank">阅读全文</a>';
      html += '</div> </div>';
    return html;
  }
});
</script>
#@_footer()
